<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div class="container el-custom-table-container">
          <table-componets-vue
            ref="table1"
            :isShowButton="true"
            :Sizes="sizes"
            :layout="layout"
            @PageChange="PageChange"
            :currentPage="query.page"
            :pageSize="query.pageSize"
            @tableEvent="tableEvent"
            :loading="tableLoading"
            :isQuery="1 == 1"
            :tables="tables"
            :isOpertions="1 == 1"
            @hyperLinekEvent="hyperLinekEvent"
          ></table-componets-vue>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../../components/TableComponets.vue";
import confVue from "../../utils/conf.vue";

let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    TableComponetsVue
  },
  data() {
    return {
      trees: [],
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: ""
      },
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15
      },
      btns: [],
      inModel: {},
      apipath: "file",
      treeloadig: false,
      isSearch: true,
      parentId: 0,
      paramter: {},
      way: confVue.$docApi,
      dialogIocnVisable: false,
      folderid: 0,
      fileType: 0
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.InitTable(this.query);
  },
  methods: {
    getHeight() {
      this.outHeight.height = windowHeight - 190 + "px";
      this.autoHeight.height = windowHeight - 190 + "px";
    },
    OpenTreeItem(item) {
      this.folderid = 0;
      item.forEach(element => {
        this.InitTable(element);
      });
    },
    ///初始化表格数据
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.query.paramters = [];
      this.query.paramters.push({ label: "folderid", value: this.folderid });
      reqVue.$Post(this.query, this.apipath + "/v1.0/pages", this.way).then(
        function(data) {
          if (data.status) {
            this.tables = data.body;
            this.total = data.total;
            this.btns = data.operations;
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    },
    ///表格翻页事件
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    ///表格按钮事件
    tableEvent(btn) {
      this.onlineEvent(btn.data);
      this.downloadEvent(btn.data);
    },
    //下载文件
    downloadEvent(btn) {
      if (btn.value == "download")
        reqVue.$download(
          { autoid: btn.primaryKeyValue },
          "download",
          btn.keyFieldValue
        );
    },
    ///在线处理文件
    onlineEvent(btn) {
      if (btn.value == "ondetaildoc") {
        window.open(
          "/office/index.html?fileid=" +
            btn.primaryKeyValue +
            "&ctype=2&systemType=2"
        );
      }
    },
    ///超链接事件
    hyperLinekEvent(res) {
      if (res.data.fileType == 0) {
        this.folderid = res.data.autoId;
        this.InitTable(this.paramter);
      } else {
        if (
          res.data.fileType == 1 ||
          res.data.fileType == 2 ||
          res.data.fileType == 3
        )
          window.open(
            "/office/index.html?fileid=" +
              res.data.autoId +
              "&ctype=2&systemType=2"
          );
        else {
          window.open(res.data.fileUri);
        }
      }
    }
  }
};
</script>  